<template>
    <el-main>
        <el-row v-if="optionRotate.data.length > 0" :gutter="20">
            <el-card class="box-card" style="min-height: 200px;">
                <avue-data-rotate :option="optionRotate"></avue-data-rotate>
            </el-card>
        </el-row>
        <el-row v-if="optionTabs.data.length > 0" :gutter="20">
            <el-card class="box-card" style="min-height: 200px;">
                <avue-data-tabs :option="optionTabs"></avue-data-tabs>
            </el-card>
        </el-row>
        <el-row v-if="optionCard.data.length > 0" :gutter="20">
            <el-card class="box-card" style="min-height: 200px;">
                <avue-data-card :option="optionCard"></avue-data-card>
                <avue-data-progress :option="optionProgress"></avue-data-progress>
            </el-card>
        </el-row>
        <el-row v-if="hotListData.length > 0" :gutter="20">
            <el-card class="box-card" style="min-height: 200px;">
                <avue-crud ref="crud" :data="hotListData" :option="optionHotQuestion" @expand-change="expandChanges">
                    <template slot="expand" slot-scope="{row}">
                        <avue-article :option="hotQuestionDetailOption" :data="hotQuestionDetailData"></avue-article>
                    </template>
                </avue-crud>
            </el-card>
        </el-row>
    </el-main>
</template>

<script>
    export default {
        data() {
            return {
                hotQuestionDetailOption: {
                    props: {
                        title: 'title',
                        meta: 'meta',
                        body: 'body'
                    },
                },
                hotQuestionDetailData: [],
                hotListData: [],
                optionHotQuestion: {
                    expand: true,
                    expandRowKeys: [],
                    idKey: 'id',
                    page: false,
                    align: 'center',
                    menuAlign: 'center',
                    size: 'small',
                    addBtn: false,
                    delBtn: false,
                    editBtn: false,
                    viewBtn: false,
                    searchBtn: false,
                    searchShow: false,
                    filterBtn: false,
                    columnBtn: false,
                    refreshBtn: false,
                    menu: false,
                    column: [{
                        label: '标题',
                        prop: 'title',
                        span: 24,
                    }, {
                        label: '所属话题',
                        prop: 'topic',
                        span: 24,
                    }, {
                        label: '所属分类',
                        prop: 'catesShow',
                        span: 24,
                    }, {
                        label: '发布人',
                        prop: 'publishname',
                        span: 24,
                    }, {
                        label: '喜欢/评论/关注/阅读',
                        prop: 'fclr',
                        span: 24,
                    }, {
                        label: '发布时间',
                        prop: 'created_at',
                        span: 24,
                    }]
                },
                optionRotate: {
                    span: 6,
                    data: [],
                },
                optionTabs: {
                    span: 8,
                    data: []
                },
                optionCard: {
                    span: 6,
                    data: []
                },
                optionProgress: {
                    span:6,
                    data: []
                },
            }
        },
        created() {
            this.getSystemRotate(),
            this.getSystemTabs(),
            this.getSystemCard(),
            this.getSystemHotQuestion()
        },
        methods: {
            getSystemRotate() {
                const _this = this
                _this.axios.post(_this.$API.ZHIHUAPI.getSystemRotate).then((
                    res) => {
                    res = res.data
                    if (res.code === 10000) {
                        _this.optionRotate.data = res.data
                    } else {
                        _this.optionRotate.data = []
                    }
                }).catch(() => {})
            },
            getSystemTabs() {
                const _this = this
                _this.axios.post(_this.$API.ZHIHUAPI.getSystemTabs).then((
                    res) => {
                    res = res.data
                    if (res.code === 10000) {
                        _this.optionTabs.data = res.data
                    } else {
                        _this.optionTabs.data = []
                    }
                }).catch(() => {})
            },
            getSystemCard() {
                const _this = this
                _this.axios.post(_this.$API.ZHIHUAPI.getSystemCard).then((
                    res) => {
                    res = res.data
                    if (res.code === 10000) {
                        _this.optionCard.data = res.data.card
                        _this.optionProgress.data = res.data.progress
                    } else {
                        _this.optionCard.data = []
                        _this.optionProgress.data = []
                    }
                }).catch(() => {})
            },
            getSystemHotQuestion()
            {
                const _this = this
                _this.axios.post(_this.$API.ZHIHUAPI.getSystemHotQuestion).then((
                    res) => {
                    res = res.data
                    if (res.code === 10000) {
                        _this.hotListData = res.data
                    } else {
                        _this.hotListData = []
                    }
                }).catch(() => {})
            },
            expandChanges(row, expendList) {
                if (expendList.length) {
                    this.optionHotQuestion.expandRowKeys = []
                    this.hotQuestionDetailData = []
                    if (row) {
                        this.optionHotQuestion.expandRowKeys.push(row.id)
                        this.hotQuestionDetailData = {
                            title: row.title,
                            meta: row.publishname + " / " + row.topic +" / " + row.catesShow + " / 阅读(" + row.read_count + ") / 关注(" + row.followers_count +") / 喜欢(" + row.favourite_count + ") / 评论(" + row.answers_count + ") / " + row.created_at,
                            body: row.content
                        }
                    }
                } else {
                    this.optionHotQuestion.expandRowKeys = []
                    this.hotQuestionDetailData = []
                }
            },
        }
    }
</script>

<style>
</style>
